import React from 'react';

import {Handle} from 'react-flow-renderer';

class CustomNode extends React.Component {

    constructor() {
        super();
        this.state = {
            time: Math.random()
        }
    }

    componentDidMount() {
        let that = this;
        setInterval(() => {
            that.setState({
                time: Math.random()
            })
        }, 1000)
    }

    render() {
        const {time} = this.state;
        return <>
            <Handle
                type="target"
                position="left"
                style={{background: '#555'}}
                onConnect={(params) => console.log('handle onConnect', params)}
                isConnectable={this.props.isConnectable}
            />
            <div>
                {time}
            </div>
            <Handle
                type="source"
                position="right"
                id="a"
                style={{top: 10, background: '#555'}}
                isConnectable={this.props.isConnectable}
            />
            <Handle
                type="source"
                position="right"
                id="b"
                style={{bottom: 10, top: 'auto', background: '#555'}}
                isConnectable={this.props.isConnectable}
            />
        </>
    }
}

export default CustomNode;